<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Quick Start</title>
  <script src="/js/spritejs.js"></script>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      background: #201e1e;
      height: 100%;
      width: 100%;
      max-width: 800px;
    }

    #stage {
      display: inline-block;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background: #201e1e;
    }  
  </style>
</head>
<body>
  <div id="stage"></div>
  <script>
  (async function () {
    const {Scene, Sprite, Label, Group, Path} = spritejs;
    const container = document.getElementById('stage');
    const scene = new Scene({
      container,
      width: 1200,
      height: 1200,
    });
  
    const fglayer = scene.layer('fglayer');
    fglayer.canvas.style.backgroundColor = '#F0DBAE';

    await scene.preload([
      'https://p5.ssl.qhimg.com/t01f47a319aebf27174.png',
      'https://s3.ssl.qhres.com/static/a6a7509c33a290a6.json',
    ]);

    const huanhuan = new Group();
    huanhuan.attr({
      pos: [600, 600],
      rotate: 30,
    });
    fglayer.append(huanhuan);

    const robot = new Sprite('huanhuan.png');
    robot.attr({
      anchor: [0.5, 0],
      size: [78, 96],
    });
    huanhuan.append(robot);

    const outerFireD = 'M19.8173,24.1766 L5.3273,32.9936 C4.6293,33.4186 3.7183,33.1976 3.2943,32.4996 C3.1953,32.3376 3.1313,32.1596 3.1003,31.9836 L0.1953,15.2736 C-1.0387,8.1796 3.7123,1.4286 10.8073,0.1946 C17.9013,-1.0394 24.6523,3.7116 25.8853,10.8056 C26.8283,16.2296 24.2443,21.4666 19.8173,24.1766';

    const outerFire = new Path();
    outerFire.attr({
      d: outerFireD,
      pos: [-12, 90],
      fillColor: 'rgb(253,88,45)',
      zIndex: -1,
    });
    huanhuan.append(outerFire);

    const innerFireD = 'M15.9906,13.766 L8.4096,26.718 C8.0486,27.335 7.2706,27.521 6.6726,27.133 C6.4296,26.976 6.2536,26.748 6.1536,26.491 L0.6356,12.223 C-1.1554,7.594 0.9666,2.393 5.3746,0.605 C9.7826,-1.182 14.8076,1.122 16.5976,5.752 C17.6546,8.483 17.3236,11.455 15.9906,13.766';

    const innerFire = new Path();
    innerFire.attr({
      d: innerFireD,
      pos: [-5, 90],
      rotate: 15,
      fillColor: 'rgb(254,222,9)',
      zIndex: -1,
    });
    huanhuan.append(innerFire);

    const keyboardBg = new Sprite();
    keyboardBg.attr({
      size: [380, 400],
      pos: [750, 900],
      bgcolor: '#E0CDA3',
      borderRadius: 20,
    });
    fglayer.append(keyboardBg);

    class KeyButton extends Label {
      constructor(text) {
        super({
          text,
          font: '40px "宋体"',
          fillColor: '#333',
          bgcolor: '#FFFDE6',
          borderRadius: 15,
          width: 80,
          height: 80,
          textAlign: 'center',
          lineHeight: 80,
        });
      }
    }


    function setKey(key, x, y) {
      const button = new KeyButton(key);
      button.attr({
        pos: [x, y],
      });
      ['keydown', 'mousedown', 'touchstart'].forEach((event) => {
        button.addEventListener(event, (evt) => {
          button.attr({
            bgcolor: '#E8E6D1',
            fillColor: '#333',
          });
        });
      });

      ['keyup', 'mouseup', 'touchend'].forEach((event) => {
        button.addEventListener(event, (evt) => {
          button.attr({
            bgcolor: '#FFFDE6',
            fillColor: '#333',
          });
        });
      });
      fglayer.append(button);
      return button;
    }

    const flapping = huanhuan.animate([
      {translate: [8.5, 10]},
      {translate: [-8.5, -10]},
    ], {
      duration: 1000,
      iterations: Infinity,
      direction: 'alternate',
    });

    let moving = null;
    function moveY(destY) {
      flapping.pause();
      const y = huanhuan.attr('y');
      if(moving) moving.cancel(true);
      moving = huanhuan.animate([
        {y},
        {y: destY},
      ], {
        duration: Math.abs(10 * (y - destY)),
        fill: 'forwards',
      });
    }
    function moveX(destX) {
      flapping.pause();
      const x = huanhuan.attr('x');
      if(moving) moving.cancel(true);
      moving = huanhuan.animate([
        {x},
        {x: destX},
      ], {
        duration: Math.abs(10 * (x - destX)),
        fill: 'forwards',
      });
    }

    function stopMove() {
      if(moving) {
        moving.cancel(true);
        moving = null;
      }
      flapping.play();
    }

    window.scene = scene;

    const buttonW = setKey('W', 900, 950);
    const buttonA = setKey('A', 800, 1050);
    const buttonS = setKey('S', 900, 1050);
    const buttonD = setKey('D', 1000, 1050);
    ['keydown', 'mousedown', 'touchstart'].forEach((event) => {
      buttonW.addEventListener(event, moveY.bind(null, -1000));
      buttonA.addEventListener(event, moveX.bind(null, -1000));
      buttonS.addEventListener(event, moveY.bind(null, 3000));
      buttonD.addEventListener(event, moveX.bind(null, 3000));
    });
    ['keyup', 'mouseup', 'touchend'].forEach((event) => {
      buttonW.addEventListener(event, stopMove);
      buttonA.addEventListener(event, stopMove);
      buttonS.addEventListener(event, stopMove);
      buttonD.addEventListener(event, stopMove);
    });

    document.addEventListener('keydown', (event) => {
      [buttonW, buttonA, buttonS, buttonD].forEach((button) => {
        if(event.key === button.text.toLowerCase()) {
          button.dispatchEvent(event);
        }
      });
    });

    document.addEventListener('keyup', (event) => {
      [buttonW, buttonA, buttonS, buttonD].forEach((button) => {
        if(event.key === button.text.toLowerCase()) {
          button.dispatchEvent(event);
        }
      });
    });

    /* eslint-disable no-console */
    console.log('press key to move robot');
    /* eslint-enable no-console */
  }());
  </script>
</body>
</html>